/// Copyright (c) 2024 The X-Files Research Institute
///
/// All rights reserved.
///
/// Redistribution and use in source and binary forms, with or without modification,
/// are permitted provided that the following conditions are met:
///
///     * Redistributions of source code must retain the above copyright notice,
///       this list of conditions and the following disclaimer.
///     * Redistributions in binary form must reproduce the above copyright notice,
///       this list of conditions and the following disclaimer in the documentation
///       and/or other materials provided with the distribution.
///     * Neither the name of Stoream nor the names of its contributors
///       may be used to endorse or promote products derived from this software
///       without specific prior written permission.
///
/// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
/// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
/// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
/// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
/// CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
/// EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
/// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
/// PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
/// LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
/// NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
/// SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


import { Link, useRouteError } from "react-router-dom";
import { Card, Image, Text, Badge, Button, Group, Container, Space, Title, Center, Divider } from '@mantine/core';

const Error = () => {
  const error: any = useRouteError();
  return (
    <Container flex={"center"}>
      <Space h="lg" />
      <Space h="lg" />
      <Space h="lg" />
      <Space h="lg" />
      <Card shadow="lg" padding="lg" radius="md" style={{border: "1px solid orange"}} >
        <Card.Section>
          <Image
            src="/logo.png"
            height={160}
            alt="Stoream"
          />
        </Card.Section>

        <Group justify="flex-start" mt="md" mb="xs">
          <Badge color="red" />
          <Title order={2}>
            Oops!
          </Title>
        </Group>

        <Text size="sm" mb={"lg"}>
          STOREAM ERROR: {error.statusText || error.message}
        </Text>

        {error.statusText || error.stack.split("\n").map((msg: string) => {
          return (
            <Text size="sm" c="dimmed">
              {msg}
              <Divider h={"xs"} />
            </Text>)
          })
        }

        <Center>
          <Link to="https://github.com/x-fri/stoream/issues">
            <Button color="red" mt="md" radius="md">
              Feedback
            </Button>
          </Link>
        </Center>
      </Card>
    </Container>
  );
};

export default Error;
